<template>
	<view class="live-item pr c-fff">
		<image :src="datas.img" mode="" class="live-bg"></image>
			<view v-if="type==1" class="top fsb df-ac ">
				<view class="fz34 fw-b">夏日好物，上新预告</view>
				<view class="view df-ac">
					<image src="../static/imgs/view.png" mode="" class="view-icon"></image>
					<view class="text">
						786观看
					</view>
				</view>
			</view>
			<view v-else class="top fsb df-ac ">
				<view>距开播还有</view>
				<view>01</view>天
				<view>01</view>时
				<view>01</view>分
				<view>01</view>秒
			</view>
		<view class="bottom">
			<view class=" df-ac">
				<image src="../static/imgs/user.jpg" mode="" class="user"></image>
				<view class="">
					<view class="fz30 mb-5 ">小姐姐官方旗舰店</view>
					<view class="fz22">武汉</view>
				</view>
			</view>
			<image v-if="type==1" src="../static/imgs/lick.png" mode="" class="like posy-c" @click="collect"></image>
			<view v-if="type==2" class="tip posy-c" :class="{cancel:text=='取消提醒'}" @click="tipCick">{{text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			datas: {
				type:Object,
				default:()=> {
					return {}
				}
			},
			type:{
				type:Number,
				default:1
			}
		},
		data() {
			return {
				text:'开播提醒'
			};
		},
		methods: {
			collect() {
				
			},
			tipCick() {
				if(this.text=='开播提醒') {
					this.text = '取消提醒'
				}else { 
					this.text = '开播提醒'
				}	
			}
		}
	}
</script>

<style lang="scss">
.live-item {
	// width: 100%;
	// width: 335px;
	// border-radius: 20rpx;
	margin-bottom: 20rpx;
	// overflow: hidden;
	position: relative;
	background-image: linear-gradient(to bottom ,rgba(0,0,0,.5) 0%, rgba(0,0,0,.1) 20%, transparent 30%,rgba(0,0,0,.1) 80%, rgba(0,0,0,.5) 100% );
	.live-bg {
		width: 100%;
		height: 360rpx;
		border-radius: 20rpx;
		position: relative;
		z-index: -1;
	}
	.top {
		width: 100%;
		position: absolute;
		top: 30rpx;
		padding: 0 30rpx;
		.view {
			border-radius: 20rpx;
			background-color: rgba(0,0,0,.3);
		
			font-size: 22rpx;
			color: #fff;
			padding-right: 20rpx;
			.view-icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}
		}
	}
	.bottom {
		position: absolute;
		left: 30rpx;
		right: 30rpx;
		bottom: 30rpx;
		// width: 100%;
		.user {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 15rpx;
		}
		.like {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			right: 0;
		}
	}
	.tip {
		width: 145rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		background-color: #FE5634;
		font-size: 22rpx;
		border-radius: 24rpx;
		position: absolute;
		right: 0;
		&.cancel {
			background-color: rgba(40,42,50,0.68);
		}
	}
}
</style>
